<!-- 用户账号 -->
<template>
  <SearchTable :query="data.query" :list="data.list" :total="data.total" :showExport="true" @changeSize="changeSize"
    @changePage="changePage" @search="getSearchList" @changeTh="data.dialogVisible = true" :resetShow="true"
    @reset="handleReset" @download="exportXlsx" >
    <template #form>
      <el-form-item label="">
        <el-select class="selectWidth120" v-model="data.query.search_type" :placeholder="$t('340')">
          <el-option v-for="item in USERCEXT" v-show="item.value != 2" :key="item.value" :label="item.label"
            :value="item.value" />
        </el-select>
        <el-input class="width200" v-model="data.query.search_value" :placeholder="$t('19')" />
      </el-form-item>
      <el-form-item :label="$t('20')">
        <el-select v-model="data.query.is_online" :placeholder="$t('340')">
          <el-option :label="$t('21')" :value="-1" />
          <el-option v-for="item in ONLINE" :key="item.label" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-select class="selectWidth120" v-model="data.query.time_type" :placeholder="$t('340')">
          <el-option v-for="item in CREATETIME" :key="item.label" :label="item.label" :value="item.value" />
        </el-select>
        <el-date-picker v-model="data.query.date" type="daterange" range-separator="-" :start-placeholder="$t('26')"
          :end-placeholder="$t('27')" value-format="YYYY-MM-DD" :disabled-date="indexStore.disabledDateTime"/>
      </el-form-item>
    </template>
    <template #button>
      <el-button type="danger" @click="data.isControlShow = true"> {{t('776')}}</el-button>
    </template>
    <template #table>
      <template v-for="(item, index) in data.fields" :key="index">
        <el-table-column v-if="item.visible" :prop="item.prop" :label="item.label" :width="item.width"
          show-overflow-tooltip>
          <template #header>
            <el-tooltip v-if="item.tips" effect="dark" placement="top">
              <template #content>
                <div v-html="item.tips"></div>
              </template>
              <el-icon class="ques-tips">
                <QuestionFilled />
              </el-icon>
            </el-tooltip>
            {{ item.label }}
          </template>
          <template v-if="item.prop == 'created_at_stamp'" #default="scope">
            {{ setTimestampTime(scope.row.created_at_stamp) }}
          </template>
          <template v-if="item.prop == 'last_login_stamp'" #default="scope">
            {{ setTimestampTime(scope.row.last_login_stamp) }}
          </template>
          <template v-if="item.prop == 'account3d_id'" #default="scope">
            <span class="item_check" @click="checkUser(scope.row.account3d_id, 1)">
              {{ scope.row.account3d_id }}
            </span>
          </template>
          <template v-if="item.prop == 'account3d'" #default="scope">
            <span class="item_details" @click="checkUser(scope.row.account3d, 3), data.checkedItem = scope.row">
              {{ scope.row.account3d }}
            </span>
          </template>
          <template v-if="item.prop == 'today_bet'" #default="scope">
            <span class="colorText">{{ BigWan(scope.row.today_bet) }}</span>
          </template>
          <template v-if="item.prop == 'total_bet'" #default="scope">
            <span class="colorText">{{ BigWan(scope.row.total_bet) }}</span>
          </template>
          <template v-if="item.prop == 'today_game_income'" #default="scope">
            <span :class="colorClass(scope.row.today_game_income)">{{ BigWan(scope.row.today_game_income) }}</span>
          </template>
          <template v-if="item.prop == 'total_game_income'" #default="scope">
            <span :class="colorClass(scope.row.total_game_income)">{{ BigWan(scope.row.total_game_income) }}</span>
          </template>
          <template v-if="item.prop == 'agent_id'" #default="scope">
            {{ selectToLabel(data.agentList, scope.row.agent_id, 'agent_name', 'agent_id') }}
          </template>
          <template v-if="item.prop == 'is_online'" #default="scope">
            <el-tag :type="scope.row.is_online == 1 ? 'primary' : 'danger'">{{
              selectToLabel(ONLINE, scope.row.is_online)
            }}</el-tag>
          </template>
          <template v-if="item.prop == 'amount'" #default="scope">
            <span class="colorText">{{ BigWan(scope.row.amount) }}</span>
          </template>
        </el-table-column>
      </template>
      <el-table-column fixed="right" :label="t('97')" width="120">
        <template #default="scope">
          <el-button :type="scope.row.user_rtp_game_info ? 'danger' : 'warning'" size="small" @click="checkUserRtp(scope.row)">
            {{t('763')}}
          </el-button>
        </template>
      </el-table-column>
    </template>
  </SearchTable>

  <!-- 变更表头弹框 -->
  <tableHeader :dialogVisible="data.dialogVisible" :list="data.fields" @cancel="data.dialogVisible = false"
    @resetData="resetData"></tableHeader>

  <!-- 玩家信息详情 -->
  <UserDetails :show="data.isUserDetails" @onHideDetails="onHideDetails" :checkedItem="data.checkedItem" />

  <!-- 玩家批量调控列表 -->
  <BatchControl :show="data.isControlShow" @onHideDetails="onHideDetails" />

  <!-- 单个玩家调控 -->
  <IndividualControl :show="data.isUserControlShow" :checkedItem="data.checkedItem" @onHideDetails="onHideDetails" />
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, onMounted, computed, watch } from 'vue'
import tableHeader from '@/components/tableHeader/tableHeader.vue'
import SearchTable from '@/components/SearchTable/SearchTable.vue'
import BatchControl from '@/views/users/components/BatchControl.vue'
import UserDetails from '@/views/users/components/user-details.vue'
import IndividualControl from '@/views/users/components/IndividualControl.vue'
import { getUserList } from '@/api/user'
import { USERCEXT, CREATETIME, ONLINE } from '@/config/eunm'
import { selectToLabel, colorClass } from '@/utils/index'
import { getDateDay, setTimeValue, setTimestampTime } from '@/utils/time'
import { exportToExcel } from '@/utils/export'
import { BigWan } from '@/utils/math'

import { useStore } from '@/stores/index'
const indexStore = useStore()
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

onMounted(async () => {
  getSearchList()
})

const data = reactive({
  query: {
    time_type: 2, // 1是创建时间 2是最后登录时间
    start_time: '', // 开始时间
    end_time: '', // 结束时间
    date: [getDateDay(0), getDateDay(0)],
    search_type: 1, // 1是平台id 2玩家昵称 3平台名称
    search_value: '', // 搜索的值
    agent_id: -1, // 代理id -1是全部
    is_online: -1,
    page: 1,
    size: 50
  },
  list: [],
  total: 0,
  fields: [
    { label: t('24'), prop: 'created_at_stamp', width: '180', visible: true, tips: t('299') },
    { label: t('32'), prop: 'last_login_stamp', width: '180', visible: true, tips: t('298') },
    { label: t('20'), prop: 'is_online', width: '100', visible: true, tips: t('297') },
    { label: t('17'), prop: 'account3d_id', width: '150', visible: true, tips: t('289') },
    { label: t('18'), prop: 'account3d', width: '180', visible: true, tips: t('290') },
    { label: t('376'), prop: 'today_bet', width: '180', visible: true, sortable:true, tips: t('535') },
    { label: t('485'), prop: 'total_bet', width: '180', visible: true, tips: t('536') },
    { label: t('377'), prop: 'today_game_income', width: '180', visible: true, sortable:true, tips: t('537') },
    { label: t('378'), prop: 'total_game_income', width: '180', visible: true, sortable:true, tips: t('538') },
    { label: t('31'), prop: 'amount', width: '180', visible: true, tips: t('296', { br: '<br>' }) },
    { label: t('379'), prop: 'today_login_num', width: '150', visible: true, tips: t('539') },
    { label: t('380'), prop: 'total_login_num', width: '150', visible: true, sortable:true, tips: t('540') },
  ],
  dialogVisible: false,
  isControlShow: false,
  isUserControlShow: false,
  isUserDetails: false,
  checkedItem: {},
  agentList: [] as any[],
})

// 点击商户id 修改名称
const checkUser = (val: string, type: number) => {
  if (type == 1) {
    data.query.search_type = type
    data.query.search_value = val
    getSearchList()
  } else {
    data.isUserDetails = true
  }
}

const getSearchList = async () => {
  indexStore.setPageLoading(true)
  data.query = setTimeValue(data.query)
  let res = await getUserList(data.query)
  indexStore.setPageLoading(false)
  res.data.list?.forEach((item: any) => {
    item.uid = item.id
  })
  data.list = res.data.list
  data.total = res.data.total
}

// 获取玩家RTP调控
const checkUserRtp = async (row: any) => {
  data.checkedItem = row
  data.isUserControlShow = true
}

// 重置查询 
const handleReset = () => {
  data.query = {
    time_type: 2, // 1是创建时间 2是最后登录时间
    start_time: '', // 开始时间
    end_time: '', // 结束时间
    date: [getDateDay(0), getDateDay(0)],
    search_type: 1, // 1是平台id 2玩家昵称 3平台名称
    search_value: '', // 搜索的值
    agent_id: -1, // 代理id -1是全部
    is_online: -1,
    page: 1,
    size: 50
  }
  getSearchList()
}

// 修改页数
const changePage = (val: number) => {
  data.query.page = val
  getSearchList()
}
const changeSize = (val: number) => {
  data.query.size = val
}

const exportXlsx = async () => {
  let query = JSON.parse(JSON.stringify(data.query))
  query.page = 1
  query.size = 100000
  let res = await getUserList(query)
  let dataList = res.data.list

  let header: string[] = []
  let list: never[][] = []

  data.fields.forEach((item) => {
    header.push(item.label)
  })

  dataList.forEach((item: { [x: string]: any }, index: any) => {
    let arr: never[] = []
    data.fields.forEach((x) => {
      switch (x.prop) {
        case 'today_bet':
          arr.push(BigWan(item[x.prop]) as never)
          break
        case 'total_bet':
          arr.push(BigWan(item[x.prop]) as never)
          break
        case 'today_game_income':
          arr.push(BigWan(item[x.prop]) as never)
          break
        case 'total_game_income':
          arr.push(BigWan(item[x.prop]) as never)
          break
        case 'amount':
          arr.push(BigWan(item[x.prop]) as never)
          break
        case 'is_online':
          arr.push(selectToLabel(ONLINE, item[x.prop]) as never)
          break
        case 'agent_id':
          arr.push(selectToLabel(data.agentList, item[x.prop], 'agent_name', 'agent_id') as never)
          break
        default:
          arr.push(item[x.prop] as never)
          break
      }
    })
    list.push(arr)
  })

  exportToExcel(list, header, t('7'))
}

// 重置表头
const resetData = (val: any) => {
  data.fields = val
}
// 重置
const onHideDetails = (show: boolean) => {
  data.dialogVisible = false
  data.isControlShow = false
  data.isUserDetails = false
  data.isUserControlShow = false
  if(show){
    getSearchList()
  }
}
</script>

<style scoped lang="scss"></style>
